<div [@routerTransition]>
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>外协任务状态</span>
                </h3>
                <span class="m-section__sub"> 管理外协任务的文本头信息 </span>
            </div>
            <div class="col text-right mt-3 mt-md-0">
                <button
                    type="button"
                    style="margin-left: 25px;"
                    class="btn btn-sm m-btn--gradient-from-accent m-btn--gradient-to-success"
                    (click)="outplanPrintModal.show(selectedpipe)"
                >
                    打印外协交接单
                </button>
                <!-- <div
                    class="btn-group dropdown"
                    dropdown
                    container="body"
                    style="margin-left: 5px;"
                >
                    <button
                        dropdownToggle
                        class="btn btn-outline-success dropdown-toggle"
                        style="margin-right: 10px;"
                    >
                        <i class="fa fa-file-excel-o"></i>
                        Excel操作
                    </button>
                    <div class="dropdown-menu" *dropdownMenu>
                        <a
                            class="dropdown-item"
                            href="javascript:;"
                            (click)="exportToExcel()"
                            >导出所有数据</a
                        >
                    </div>
                </div> -->
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="tabbable-line">
                    <div class="tab-content" style="padding-top: 0;">
                        <div class="tab-pane active" id="tab-model">
                            <form class="horizontal-form" autocomplete="off">
                                <div class="m-form m-form--label-align-right">
                                    <div
                                        class="row align-items-center m--margin-bottom-10"
                                    >
                                        <div class="col-xl-12">
                                            <div
                                                class="form-group m-form__group align-items-center"
                                            >
                                                <div class="input-group">
                                                    <input
                                                        [(ngModel)]="filterText"
                                                        name="filterText"
                                                        autofocus
                                                        class="form-control m-input"
                                                        [placeholder]="
                                                            l(
                                                                'SearchWithThreeDot'
                                                            )
                                                        "
                                                        type="text"
                                                    />
                                                    <span
                                                        class="input-group-btn"
                                                    >
                                                        <button
                                                            (click)="
                                                                getDeliveryRecords(
                                                                    $event
                                                                )
                                                            "
                                                            class="btn btn-primary"
                                                            type="submit"
                                                        >
                                                            <i
                                                                class="flaticon-search-1"
                                                                [attr.aria-label]="
                                                                    l('Search')
                                                                "
                                                            ></i>
                                                        </button>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div
                                        class="row m--margin-bottom-10"
                                        [hidden]="!advancedFiltersAreShown"
                                    >
                                        <
                                    </div>

                                    <div
                                        class="row margin-bottom-10"
                                        *ngIf="advancedFiltersAreShown"
                                    >
                                        <div class="col-sm-12 text-right">
                                            <button
                                                class="btn btn-metal"
                                                (click)="
                                                    getDeliveryRecords(
                                                        $event,
                                                        1
                                                    )
                                                "
                                            >
                                                <i class="fa fa-refresh"></i>
                                                {{ l('Refresh') }}
                                            </button>
                                        </div>
                                    </div>
                                    <div class="row margin-bottom-10">
                                        <div class="col-sm-12">
                                            <span
                                                class="clickable-item text-muted"
                                                *ngIf="!advancedFiltersAreShown"
                                                (click)="
                                                    advancedFiltersAreShown = !advancedFiltersAreShown
                                                "
                                            >
                                                <i class="fa fa-angle-down"></i>
                                                {{
                                                    l('ShowAdvancedFilters')
                                                }}</span
                                            >
                                            <span
                                                class="clickable-item text-muted"
                                                *ngIf="advancedFiltersAreShown"
                                                (click)="
                                                    advancedFiltersAreShown = !advancedFiltersAreShown
                                                "
                                            >
                                                <i class="fa fa-angle-up"></i>
                                                {{
                                                    l('HideAdvancedFilters')
                                                }}</span
                                            >
                                        </div>
                                    </div>
                                </div>
                            </form>

                            <div class="row align-items-center">
                                <div
                                    class="primeng-datatable-container"
                                    [busyIf]="primengTableHelper.isLoading"
                                >
                                    <p-table
                                        #dataTable
                                        (onLazyLoad)="
                                            getDeliveryRecords($event)
                                        "
                                        [value]="primengTableHelper.records"
                                        rows="{{
                                            primengTableHelper.defaultRecordsCountPerPage
                                        }}"
                                        [paginator]="false"
                                        [lazy]="true"
                                        emptyMessage="没有数据"
                                        scrollable="true"
                                        ScrollWidth="100%"
                                        responsive="primengTableHelper.isResponsive"
                                        resizableColumns="primengTableHelper.resizableColumns"
                                        dataKey="taskCode"
                                    >
                                        <ng-template pTemplate="header">
                                            <tr>
                                                <th style="width: 33px;"></th>
                                                <th style="width: 50px;">
                                                    ID
                                                </th>
                                                <th
                                                    style="width: 150px;"
                                                    pSortableColumn="creationTime"
                                                >
                                                    投产时间
                                                    <p-sortIcon
                                                        field="creationTime"
                                                    ></p-sortIcon>
                                                </th>
                                                <th style="width: 150px;">
                                                    任务号
                                                </th>
                                                <th style="width: 150px;">
                                                    名称
                                                </th>
                                                <th style="width: 150px;">
                                                    图号
                                                </th>
                                                <th style="width: 50px;">
                                                    数量
                                                </th>
                                                <th
                                                    style="width: 150px;"
                                                    pSortableColumn="dueDatePlanned"
                                                >
                                                    计划完成时间
                                                    <p-sortIcon
                                                        field="dueDatePlanned"
                                                    ></p-sortIcon>
                                                </th>
                                                <th style="width: 120px;">
                                                    外协厂家
                                                </th>
                                                <!-- <th style="width: 150px;">
                                                    是否生成交接单
                                                </th> -->
                                                <th style="width: 120px;">
                                                    交接单编号
                                                </th>

                                                <th
                                                    style="width: 150px;"
                                                    pSortableColumn="yqDate"
                                                >
                                                    要求时间
                                                    <p-sortIcon
                                                        field="yqDate"
                                                    ></p-sortIcon>
                                                </th>
                                                <th
                                                    style="width: 150px;"
                                                    pSortableColumn="scDate"
                                                >
                                                    生成交接单时间
                                                    <p-sortIcon
                                                        field="scDate"
                                                    ></p-sortIcon>
                                                </th>
                                                <!-- <th style="width: 150px;">
                                                    是否打印
                                                </th> -->
                                                <th
                                                    style="width: 150px;"
                                                    pSortableColumn="deliveryDate"
                                                >
                                                    上次打印时间
                                                    <p-sortIcon
                                                        field="deliveryDate"
                                                    ></p-sortIcon>
                                                </th>
                                            </tr>
                                        </ng-template>
                                        <ng-template
                                            pTemplate="body"
                                            let-record="$implicit"
                                        >
                                            <tr style="height: 44px;">
                                                <td style="width: 33px;">
                                                    <p-checkbox
                                                        *ngIf="
                                                            record.startState
                                                        "
                                                        name="group1"
                                                        value="{{ record.id }}"
                                                        [(ngModel)]="
                                                            selectedpipe
                                                        "
                                                    ></p-checkbox>
                                                </td>
                                                <td style="width: 50px;">
                                                    {{ record.id }}
                                                </td>
                                                <td style="width: 150px;">
                                                    {{
                                                        record.creationTime
                                                            | momentFormat
                                                                : 'YYYY-MM-DD'
                                                    }}
                                                </td>
                                                <td style="width: 150px;">
                                                    {{ record.taskCode }}
                                                </td>
                                                <td style="width: 150px;">
                                                    {{ record.taskName }}
                                                </td>
                                                <td style="width: 150px;">
                                                    {{ record.drawingCode }}
                                                </td>
                                                <td style="width: 50px;">
                                                    {{ record.amountPlanned }}
                                                </td>
                                                <td style="width: 150px;">
                                                    {{
                                                        record.dueDatePlanned
                                                            | momentFormat
                                                                : 'YYYY-MM-DD'
                                                    }}
                                                </td>
                                                <td style="width: 120px;">
                                                    {{ record.mainTeamGroup }}
                                                </td>
                                                <!-- <td style="width: 150px;">
                                                    <span
                                                        *ngIf="
                                                            record.startState
                                                        "
                                                    >
                                                        是
                                                    </span>
                                                    <span
                                                        *ngIf="
                                                            !record.startState
                                                        "
                                                    >
                                                        否
                                                    </span>
                                                </td> -->
                                                <td style="width: 120px;">
                                                    <span
                                                        *ngIf="
                                                            record.startState
                                                        "
                                                    >
                                                        {{ record.jjdCode }}
                                                    </span>
                                                    <span
                                                        *ngIf="
                                                            !record.startState
                                                        "
                                                    >
                                                        未生成交接单
                                                    </span>
                                                </td>
                                                <td style="width: 150px;">
                                                    <span
                                                        *ngIf="
                                                            record.startState
                                                        "
                                                    >
                                                        {{
                                                            record.yqDate
                                                                | momentFormat
                                                                    : 'YYYY-MM-DD'
                                                        }}
                                                    </span>
                                                    <span
                                                        *ngIf="
                                                            !record.startState
                                                        "
                                                    >
                                                        未生成交接单
                                                    </span>
                                                </td>
                                                <td style="width: 150px;">
                                                    <span
                                                        *ngIf="
                                                            record.startState
                                                        "
                                                    >
                                                        {{
                                                            record.scDate
                                                                | momentFormat
                                                                    : 'YYYY-MM-DD'
                                                        }}
                                                    </span>
                                                    <span
                                                        *ngIf="
                                                            !record.startState
                                                        "
                                                    >
                                                        未生成交接单
                                                    </span>
                                                </td>
                                                <!-- <td style="width: 150px;">
                                                    <span
                                                        *ngIf="
                                                            record.isDelivery
                                                        "
                                                    >
                                                        是
                                                    </span>
                                                    <span
                                                        *ngIf="
                                                            !record.isDelivery
                                                        "
                                                    >
                                                        否
                                                    </span>
                                                </td> -->
                                                <td style="width: 150px;">
                                                    <span
                                                        *ngIf="
                                                            record.isDelivery
                                                        "
                                                    >
                                                        {{
                                                            record.deliveryDate
                                                                | momentFormat
                                                                    : 'YYYY-MM-DD'
                                                        }}
                                                    </span>
                                                    <span
                                                        *ngIf="
                                                            !record.isDelivery
                                                        "
                                                    >
                                                        未打印
                                                    </span>
                                                </td>
                                            </tr>
                                        </ng-template>
                                    </p-table>
                                    <div class="primeng-paging-container">
                                        <p-paginator
                                            rows="{{
                                                primengTableHelper.defaultRecordsCountPerPage
                                            }}"
                                            #paginator
                                            (onPageChange)="
                                                getDeliveryRecords($event)
                                            "
                                            [totalRecords]="
                                                primengTableHelper.totalRecordsCount
                                            "
                                            [rowsPerPageOptions]="
                                                primengTableHelper.predefinedRecordsCountPerPage
                                            "
                                        >
                                        </p-paginator>
                                        <span class="total-records-count">
                                            {{
                                                '总计:' +
                                                    primengTableHelper.totalRecordsCount
                                            }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <outplanPrintModal
        #outplanPrintModal
        (modalSave)="getDeliveryRecords($event)"
    ></outplanPrintModal>
</div>
